<template>
    <div :class='$style.tag'><div :class='[$style.spot, $style[type]]'></div><slot></slot></div>
</template>

<script lang='ts' setup>
    defineProps<{
        type : 'success' | 'warning';
    }>()
</script>


<style lang='scss' module>
    .tag{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #566069;
        font-size: 14px;

        .spot{
            width: 10px;
            height: 10px;
            background: #BFC1D1;
            border-radius: 50%;

            &.success{
                background: var(--successColor);
            }

            &.warning{
                background: var(--warningColor);;
            }

        }
    }
</style>